<script setup>
import { h } from 'vue';
import { message } from 'ant-design-vue'
import {
	UserOutlined,
	SolutionOutlined,
	LoadingOutlined,
	SmileOutlined,
	CheckOutlined,
	DatabaseOutlined
} from '@ant-design/icons-vue';
import databaseConfig from "./databaseConfig.vue"
import databaseTableConfig from "./databaseTableConfig.vue"
import ProcessRelationConfig from "@/views/process/ProcessRelationConfig.vue";

import cdcDatabaseApi from '@/api/cdc/cdcDatabaseApi'

const props = defineProps(["cdcConfig", "closeModal"])

const cdcConfig = ref({
	databaseConfig: {
		tableList: {}
	}
});

const current = ref(0);
const steps = [
	{
		title: '数据库配置',
		description: '在这里配置数据库',
		// icon: h(DatabaseOutlined),
	},
	{
		title: '数据表映射',
		description: '配置表于表之间的映射',
	},
	{
		title: '数据加工',
		description: '配置同步过程中的数据加工',
	},
	{
		title: '完成',
		icon: h(CheckOutlined),
	},
];

const items = steps.map(item => ({ key: item.title, title: item.title, description: item.description, icon: item.icon }));


const next = () => {
	if (current.value == 0) {
		if (!cdcConfig.value.databaseConfig) {
			message.info("请选择来源和目标")
			return;
		}
		if (!cdcConfig.value.databaseConfig.sourceDatabaseName) {
			message.info("请选择来源")
			return;
		}

	} else if (current.value == 1) {
		//tableConfig
		if (!cdcConfig.value.databaseConfig.tableList ||
			cdcConfig.value.databaseConfig.tableList.length <= 0
		) {
			message.info("请配置表映射")
			return;
		}
	}
	current.value++;
};
const prev = () => {
	current.value--;
};

watch(() => props.cdcConfig, async (newValue, oldValue) => {
	cdcConfig.value = props.cdcConfig;
	initDatabaseConfig();
})
onMounted(async () => {
	cdcConfig.value = props.cdcConfig;
	console.log(cdcConfig.value)
	initDatabaseConfig();
})
const initDatabaseConfig = async () => {
	let bc = await queryDatabaseConfig();
	if (!bc) {
		bc = {}
	} else {
		bc = bc[0];
	}
	if (!bc) {
		bc = {};
	}
	cdcConfig.value.databaseConfig = bc;
}


const queryDatabaseConfig = async () => {
	//databaseConfig
	const d = await cdcDatabaseApi.queryByCdcId({
		cdcId: cdcConfig.value.id
	});
	return d;
}

const finish = async () => {
	let saveReuqest = {
		cdcId: cdcConfig.value.id,
		sourceDatabaseName: cdcConfig.value.databaseConfig.sourceDatabaseName,
		targetDatabaseName: cdcConfig.value.databaseConfig.targetDatabaseName,
		tableList: cdcConfig.value.databaseConfig.tableList
	}

	await cdcDatabaseApi.save(saveReuqest);
	console.log(props.closeModal)
	props.closeModal();
}
</script>

<template>


	<a-steps :current="current" :items="items"></a-steps>
	<div class="steps-content">
		<div v-if="current == 0">
			<databaseConfig :sourceDsId="cdcConfig.sourceDsId" :targetDsId="cdcConfig.targetDsId"
				:databaseConfig="cdcConfig.databaseConfig">
			</databaseConfig>
		</div>
		<div v-if="current == 1">
			<databaseTableConfig :sourceDsId="cdcConfig.sourceDsId" :targetDsId="cdcConfig.targetDsId"
				:databaseConfig="cdcConfig.databaseConfig">
			</databaseTableConfig>
		</div>
		<div v-if="current == 2">
			<!-- <div style="position: fixed;left:35%;top:40%"> -->
				<ProcessRelationConfig :biz-id="cdcConfig.id" biz-type="CDC"></ProcessRelationConfig>
			<!-- </div> -->
		</div>
		<div v-if="current == 3">
			<div style="position: fixed;left:35%;top:40%">
				您已成功完成配置，点击完成吧！
			</div>
		</div>
	</div>

	<div class="steps-action">
		<a-button v-if="current < items.length - 1" type="primary" @click="next">下一步</a-button>
		<a-button v-if="current == items.length - 1" type="primary" @click="finish">
			完成
		</a-button>
		<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button>
	</div>
</template>




<style scoped lang="less">
.steps-action {

	position: fixed;
	bottom: 10%;
	left: 40%;
	width: 100%;
}
</style>
